import React, { useEffect, useState } from 'react';
import { Tabs,Grid, Image } from 'react-vant';
import { GETIMGS, GETINFO, ALLSTATE, GETLIST,ITEMTYPE } from "../../../types/store.d"
import { useLocation, useNavigate, useParams } from "react-router-dom"
import { bindActionCreators, Dispatch } from "redux"
import { connect, useDispatch, useSelector } from 'react-redux'
import request from "../../../api/request"
import "../../../api/Data"
import * as Action from "../../../actions/index"
function Allpaper() {
  const dispatch = useDispatch()
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();
  const [active, setActive] = useState(2);
  useEffect(() => {
    request.get("/api/list").then(res => {
      dispatch(Action.get_list(res.data.list))
    })
  }, [])
  const listArr = useSelector((state: ALLSTATE) => {
    return state.listArr
  })
   const godetail=(para:ITEMTYPE)=>{
     navigate("/detail/"+para.id,{
       state:para
     })
   }
  return (
    <div>
      <div className="demo-tabs" >
        <Tabs active={0}>
          {listArr.map((item, index) => (
            <Tabs.TabPane key={index} title={item.name}>
              <Grid border={false} columnNum={2}>
                {
                  item.info.map((item,index)=>{
                  return   <Grid.Item key={index} onClick={()=>godetail(item)}>
                  <Image lazyload src={item.img}/>
                  <p>{item.title}</p>
                </Grid.Item>
                  })
                }
                

              </Grid>
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    </div>
  )
}



const mapStateToProps = (state: ALLSTATE) => ({})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    ...bindActionCreators(Action, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Allpaper)
